<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title>frequency decoder ~ Unobtrusive JavaScript datePicker widgit demo</title>
        <script type="text/javascript" src="./js/datepicker.js"></script>
        <link href="./css/demo.css"       rel="stylesheet" type="text/css" />
        <link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[

/* The following function creates a new input field and then calls datePickerController.create();
   to dynamically create a new datePicker widgit for it */
function newline() {
        var total = document.getElementById("newline-wrapper").getElementsByTagName("table").length;
        total++;

        // Clone the first div in the series
        var tbl = document.getElementById("newline-wrapper").getElementsByTagName("table")[0].cloneNode(true);

        // DOM inject the wrapper div
        document.getElementById("newline-wrapper").appendChild(tbl);

        var buts = tbl.getElementsByTagName("a");
        if(buts.length) {
                buts[0].parentNode.removeChild(buts[0]);
                buts = null;
        }

        // Reset the cloned label's "for" attributes
        var labels = tbl.getElementsByTagName('label');

        for(var i = 0, lbl; lbl = labels[i]; i++) {
                // Set the new labels "for" attribute
                if(lbl["htmlFor"]) {
                        lbl["htmlFor"] = lbl["htmlFor"].replace(/[0-9]+/g, total);
                } else if(lbl.getAttribute("for")) {
                        lbl.setAttribute("for", lbl.getAttribute("for").replace(/[0-9]+/, total));
                }
        }

        // Reset the input's name and id attributes
        var inputs = tbl.getElementsByTagName('input');
        for(var i = 0, inp; inp = inputs[i]; i++) {
                // Set the new input's id and name attribute
                inp.id = inp.name = inp.id.replace(/[0-9]+/g, total);
                if(inp.type == "text") inp.value = "";
        }

        // Call the create method to create and associate a new date-picker widgit with the new input
        datePickerController.create(document.getElementById("date-" + total));

        var dp = datePickerController.datePickers["dp-normal-1"];

        // No more than 5 inputs
        if(total == 5) document.getElementById("newline").style.display = "none";

        // Stop the event
        return false;
}

function createNewLineButton() {
        var nlw = document.getElementById("newline-wrapper");

        var a = document.createElement("a");
        a.href="#";
        a.id = "newline";
        a.title = "Create New Input";
        a.onclick = newline;
        nlw.parentNode.appendChild(a);

        a.appendChild(document.createTextNode("+"));
        a = null;
}

datePickerController.addEvent(window, 'load', createNewLineButton);

//]]>
</script>
</head>
<body>
<form id="testform" method="post" action="">
  <h1>Unobtrusive JavaScript date-picker widgit</h1>
    <h2>Keyboard access</h2>
    <table cellpadding="0" cellspacing="0" border="0" id="infotable">
      <thead>
        <tr>
          <th class="firstup">Key&#160;Combination</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><kbd>&larr;</kbd> <kbd>&rarr;</kbd> <kbd>&uarr;</kbd> <kbd>&darr;</kbd></td>
          <td>Day navigation</td>
        </tr>
        <tr>
          <td><kbd>Ctrl</kbd> + <kbd>&uarr;</kbd></td>
          <td>Next year</td>
        </tr>
        <tr>
          <td><kbd>Ctrl</kbd> + <kbd>&darr;</kbd></td>
          <td>Previous year</td>
        </tr>
        <tr>
          <td><kbd>Ctrl</kbd> + <kbd>&rarr;</kbd></td>
          <td>Next month</td>
        </tr>
        <tr>
          <td><kbd>Ctrl</kbd> + <kbd>&larr;</kbd></td>
          <td>Previous month</td>
        </tr>
        <tr>
          <td><kbd>Space</kbd></td>
          <td>Todays date</td>
        </tr>
        <tr>
          <td><kbd>Esc</kbd></td>
          <td>Close date-picker (no date selected)</td>
        </tr>
        <tr>
          <td><kbd>Return</kbd></td>
          <td>Select highlighted date and close date-picker</td>
        </tr>
        <tr>
          <td><kbd>2</kbd> - <kbd>7</kbd></td>
          <td>Select the corresponding day as the first day of the week</td>
        </tr>
      </tbody>
    </table>

    <h2>DatePicker Demos</h2>
    <fieldset>
      <legend>Single Input (static) DatePicker</legend>
      <p><code>class=&#8220;format-d-m-y divider-dash highlight-days-12 no-fade&#8221;</code></p>
      <label for="dp-normal-1">Date :</label>
      <p class="lastup"><input type="text" class="w8em format-d-m-y divider-dash highlight-days-12 no-fade" id="dp-normal-1" name="dp-normal-1" value="13-03-1970" maxlength="10" /></p>
    </fieldset>

    <fieldset>
      <legend>Split Input (fade-in) DatePicker</legend>
      <p><code>class="highlight-days-67 range-low-2006-08-11 range-high-2009-09-13 disable-days-12 split-date"</code></p>
      <div id="newline-wrapper">
        <!--

        Standards evangelists beware, I'm using a table for layout...

        Please send all comments/suggestions to itsOnlyABleedenDemo@frequency-decoder.com

        -->
        <table class="split-date-wrap" cellpadding="0" cellspacing="0" border="0">
          <tbody>
            <tr>
              <td><input type="text" class="w2em" id="date-1-dd" name="date-1-dd" value="" maxlength="2" />/<label for="date-1-dd">DD</label></td>
              <td><input type="text" class="w2em" id="date-1-mm" name="date-1-mm" value="" maxlength="2" />/<label for="date-1-mm">MM</label></td>
              <td><input type="text" class="w4em highlight-days-67 range-low-2006-08-11 range-high-2009-09-13 disable-days-12 split-date" id="date-1" name="date-1" value="" maxlength="4" /><label for="date-1">YYYY</label></td>
              <td> </td>
            </tr>
          </tbody>
        </table>
      </div>
    </fieldset>

    <fieldset>
      <legend>SelectList (static) DatePicker</legend>
      <p><code>class="highlight-days-67 disable-days-12 split-date range-low-1960-02-13 no-fade"</code></p>
      <p><strong>Note:</strong> I&#8217;ve set the lower limit of the datePicker to be (ten years) lower than the lowest possible year you can select using the year selectList in order to test the automatic resetting of the lower/higher date ranges i.e. the year selectList starts at 1970 but the className defined range has been stipulated as 1960; the datePicker should automatically reset the range to be <code>range-low-<strong>1970</strong>-02-13</code>.</p>
      <div id="select-wrapper">
        <select id="date-sel-dd" name="date-sel-dd">
          <option value="-1">Day</option>
          <option value="1">1st</option>
          <option value="2">2nd</option>
          <option value="3">3rd</option>
          <option value="4">4th</option>
          <option value="5">5th</option>
          <option value="6">6th</option>
          <option value="7">7th</option>
          <option value="8">8th</option>
          <option value="9">9th</option>
          <option value="10">10th</option>
          <option value="11">11th</option>
          <option value="12">12th</option>
          <option value="13">13th</option>
          <option value="14">14th</option>
          <option value="15">15th</option>
          <option value="16">16th</option>
          <option value="17">17th</option>
          <option value="18">18th</option>
          <option value="19">19th</option>
          <option value="20">20th</option>
          <option value="21">21st</option>
          <option value="22">22nd</option>
          <option value="23">23rd</option>
          <option value="24">24th</option>
          <option value="25">25th</option>
          <option value="26">26th</option>
          <option value="27">27th</option>
          <option value="28">28th</option>
          <option value="29">29th</option>
          <option value="30">30th</option>
          <option value="31">31st</option>
        </select>
        <select id="date-sel-mm" name="date-sel-mm">
          <option value="-1">Month</option>
          <option value="1">January</option>
          <option value="2">February</option>
          <option value="3">March</option>
          <option value="4">April</option>
          <option value="5">May</option>
          <option value="6">June</option>
          <option value="7">July</option>
          <option value="8">August</option>
          <option value="9">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
        <select class="highlight-days-67 disable-days-12 split-date range-low-1960-02-13 no-fade" id="date-sel" name="date-sel">
          <option value="-1">Year</option>
          <option value="1970">1970</option>
          <option value="1971">1971</option>
          <option value="1972">1972</option>
          <option value="1973">1973</option>
          <option value="1974">1974</option>
          <option value="1975">1975</option>
          <option value="1976">1976</option>
          <option value="1977">1977</option>
          <option value="1978">1978</option>
          <option value="1979">1979</option>
          <option value="1980">1980</option>
          <option value="1981">1981</option>
          <option value="1982">1982</option>
          <option value="1983">1983</option>
          <option value="1984">1984</option>
          <option value="1985">1985</option>
          <option value="1986">1986</option>
          <option value="1987">1987</option>
          <option value="1988">1988</option>
          <option value="1989">1989</option>
          <option value="1990">1990</option>
        </select>
      </div>
    </fieldset>

    <fieldset>
      <legend>Mixed Input (fade-in, no transparency) DatePicker</legend>
      <p><code>class="highlight-days-67 disable-days-12 split-date no-transparency"</code></p>
      <div id="select-wrapper">
        <select id="date-sel2-dd" name="date-sel2-dd">
          <option value="-1">Day</option>
          <option value="1">1st</option>
          <option value="2">2nd</option>
          <option value="3">3rd</option>
          <option value="4">4th</option>
          <option value="5">5th</option>
          <option value="6">6th</option>
          <option value="7">7th</option>
          <option value="8">8th</option>
          <option value="9">9th</option>
          <option value="10">10th</option>
          <option value="11">11th</option>
          <option value="12">12th</option>
          <option value="13">13th</option>
          <option value="14">14th</option>
          <option value="15">15th</option>
          <option value="16">16th</option>
          <option value="17">17th</option>
          <option value="18">18th</option>
          <option value="19">19th</option>
          <option value="20">20th</option>
          <option value="21">21st</option>
          <option value="22">22nd</option>
          <option value="23">23rd</option>
          <option value="24">24th</option>
          <option value="25">25th</option>
          <option value="26">26th</option>
          <option value="27">27th</option>
          <option value="28">28th</option>
          <option value="29">29th</option>
          <option value="30">30th</option>
          <option value="31">31st</option>
        </select>
        <select id="date-sel2-mm" name="date-sel2-mm">
          <option value="-1">Month</option>
          <option value="1">January</option>
          <option value="2">February</option>
          <option value="3">March</option>
          <option value="4">April</option>
          <option value="5">May</option>
          <option value="6">June</option>
          <option value="7">July</option>
          <option value="8">August</option>
          <option value="9">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
        <input type="text" class="w3em highlight-days-67 disable-days-12 split-date no-transparency" id="date-sel2" name="date-sel2" />
      </div>
    </fieldset>

    <p class="al-center">View the related &#8220;<a href="http://www.frequency-decoder.com/2006/10/02/unobtrusive-date-picker-widgit-update/">language in the lab</a>&#8221; post for this demo.</p>
</form>
</body>
</html>
